import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, DatePicker, Select, TreeSelect, } from 'antd';
import AddTransferModal from '../../components/transfer/AddTransferModal'
import SecondTransferModal from '../../components/transfer/SecondTransferModal'
import TransferDetailModal from '../../components/transfer/TransferDetailModal'
import AddTransferDetailModal from '../../components/transfer/AddTransferDetailModal'
import EditTransferModal from '../../components/transfer/EditTransferModal'
import EditTransferDetailModal from '../../components/transfer/EditTransferDetailModal'
import DoTransferModal from '../../components/transfer/DoTransferModal'
import Alert from 'antd/lib/alert';
import Modal from 'antd/lib/modal/Modal';
import { editDetail } from '../../services/equipment';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;

function Transfer({ dispatch, transfer, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, assetList, modalType,name, detailList, editDetailList } = transfer


    const columns = [{
        title: '申请单号',
        dataIndex: 'id_',
        key: 'id_',
        width: 100,
    },
    {
        title: '预计执行时间',
        dataIndex: 'executeTime',
        key: 'executeTime',
        width: 100,
    }, {
        title: '指定操作人',
        dataIndex: 'userName',
        key: 'userName',
        width: 100,
    }, {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        width: 100,
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 60,
        render: (value, row, index) => {
            return (
                value == 1 ? "未完成" : value == 2 ? "处理中" : value == 3 ? "已完成" : ''
            )
        }
    }
        , {
        title: '操作',
        key: 'operation',
        width: 60,
        render: (text, record) => (
            <span>
                {(record.status == 1) ? (
                    <span>
                        {/* <a onClick={onEditItem.bind(null, record.id_)}>编辑</a> */}
                        <a onClick={doTransfer.bind(null, record.id_)}>确认迁移</a>
                        <span className="ant-divider" />
                        <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                            <a>删除</a>
                        </Popconfirm>
                        <span className="ant-divider" />
                    </span>
                ) :""}
                <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
            </span>
        ),
    }];

    const pagination = {
        current: transfer.current,
        pageSize: transfer.currentSize,
        total: transfer.total,
        showSizeChanger: true,
        showTotal: (total => '共' + transfer.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'transfer/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size } },
            });
        },
        onChange(current) {
            dispatch({
                type: 'transfer/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': transfer.currentSize } },
            });
        },
    };

    function deleteHandler(id) {
        dispatch({
            type: 'transfer/remove',
            payload: { id, search: { ...getFieldsValue() } },
        });
    }
    const editHandler = (id, values) => {
        dispatch({
            type: 'transfer/edit',
            payload: { id, ...values },
        });
    }
    const addDetailHandler = (detailList) => {
        dispatch({
            type: 'transfer/changeDetailList',
            payload: detailList,
        });
    }

    const searchHandle = (data) => {
        dispatch({
            type: 'transfer/querAssetListByParam',
            payload: data,
        });
    }

    const submitHandle = () => {
        dispatch({
            type: 'transfer/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    function handleClear() {
        form.resetFields();
    }

    const addHandler = () => {
        dispatch({
            type: 'transfer/onAddViewItem',
            payload: {
                modalType: 'create',
            },
        })
    }

    const doTransfer = (id) => {
        dispatch({
            type: 'transfer/onDoTransferViewItem',
            payload: id,
        })
    }

    const onEditItem = (id) => {
        dispatch({
            type: 'transfer/qryById',
            payload: id,
        })
    }
    const onViewItem = (id) => {
        dispatch({
            type: 'transfer/onViewItem',
            payload: id,
        })
    }
    const onAddDetail = () => {
        dispatch({
            type: 'transfer/showSecondModal',
        })
    }

    const onEditTransfer = (data) => {
        dispatch({
            type: 'transfer/onEditDetailViewItem',
            payload: data,
        })
    }
    // 添加详情处理
    const addTransferDetailHandler = (data) => {
        for (var i = 0; i < transfer.detailList.length; i++) {
            if (data.addDetailAssetId == transfer.detailList[i].assetId_) {
                transfer.detailList[i].targetManageBranchId = data.targetManageBranchId;           
                getDeptName(transfer.deptList,data.targetManageBranchId);
                transfer.detailList[i].targetManageBranchName = transfer.name;                
                transfer.detailList[i].targetUseBranchId = data.targetUseBranchId;             
                getDeptName(transfer.deptList,data.targetUseBranchId);
                transfer.detailList[i].targetUseBranchName =transfer.name;
                transfer.detailList[i].targetEndUser = data.targetEndUser;
                transfer.detailList[i].targetEndUserName = getUser(data.targetEndUser);
                transfer.detailList[i].targetRoomId = data.targetRoomId;
                transfer.detailList[i].targetRoomName = getRoomName(data.targetRoomId);
                transfer.detailList[i].targetRackId = data.targetRackId;
                transfer.detailList[i].targetRackName = getRackName(data.targetRackId);
                transfer.detailList[i].targetStart = data.targetStart;
                transfer.detailList[i].targetEnd = data.targetEnd;
                transfer.detailList[i].transferType = data.transferType;
                transfer.detailList[i].datacenterId = data.datacenterId;
                // 回显信息
                transfer.detailList[i].manageBranchId_ = data.targetManageBranchId;      
                transfer.detailList[i].useBranchId_ =data.targetUseBranchId;
                transfer.detailList[i].endUser = data.targetEndUser;
                transfer.detailList[i].roomId_ = data.targetRoomId;
                transfer.detailList[i].rackId_ = data.targetRackId;
                transfer.detailList[i].datacenterId_ = data.datacenterId;
                transfer.detailList[i].startU = data.targetStart;
                transfer.detailList[i].endU = data.targetEnd;
            }
        }
        dispatch({
            type: 'transfer/updateAddDetaiList',
            payload: transfer.detailList,
        })
    }
    const getRoomName = (id) => {
        for (var i in transfer.roomList) {
            if (id == transfer.roomList[i].id_) {
                return transfer.roomList[i].name;
            }
        }
    }

    const getRackName = (id) => {
        for (var i in transfer.rackList) {
            if (id == transfer.rackList[i].id_) {
                return transfer.rackList[i].assetName;
            }
        }
    }
    const getUser = (id) => {
        for (var i in transfer.deptUserList) {
            if (id == transfer.deptUserList[i].id_) {
                return transfer.deptUserList[i].name;
            }
        }
    }

    
    const getDeptName=(data,id)=> {
        for (var i in data) {
            if (data[i].id_ == id) {
                transfer.name = data[i].name;
                return;
            } else {
                getDeptName(data[i].depts, id);
            }
        }
    }

    const modalProps = {
        item: transfer.currentItem,
        visible: modalVisible,
        type: modalType,
        maskClosable: false,
        assetList: assetList,
        id: transfer.transferId,
        onAddDetail: onAddDetail,
        userList: transfer.userList,
        assetType: transfer.assetTypeTree,
        transferDetailList: transfer.detailList,
        roomList: transfer.roomList,
        assetBrandList: transfer.assetBrandList,
        confirmLoading: loading,
        title: `新增迁移单`,
        wrapClassName: 'vertical-center-modal',
        newKey: transfer.newKey,
        dispatch: dispatch,
        onOk(data) {
            dispatch({
                type: `transfer/create`,
                payload: data,
            })
        },
        onCancel() {
            dispatch({
                type: 'transfer/hideModal',
            })
        },
        onCreateDetail(data) {
            dispatch({
                type: 'transfer/showCreateDetailModal',
                payload: data,
            })
        },
    }


    const secondModalProps = {
        item: transfer.qryAssetItem,
        visible: transfer.secondModalVisible,
        assetList: assetList,
        userList: transfer.userList,
        assetType: transfer.assetTypeTree,
        detailList: detailList,
        addDetailHandler: addDetailHandler,
        roomList: transfer.roomList,
        searchHandle: searchHandle,
        assetBrandList: transfer.assetBrandList,
        assetModelList:transfer.assetModelList,
        rackList: transfer.rackList,
        assetCurrent: transfer.assetCurrent,
        assetCurrentSize: transfer.assetCurrentSize,
        assetTotal: transfer.assetTotal,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增明细',
        wrapClassName: 'vertical-center-modal',
        newKey: transfer.newKey,
        onCancel() {
            dispatch({
                type: 'transfer/hideSecondModal',
            })
        },
    }

    const viewModalProps = {
        item: transfer.viewItem,
        visible: transfer.viewModalVisible,
        // form: form,
        maskClosable: false,
        viewDetailList: transfer.viewDetailList,
        confirmLoading: loading,
        title: '查看迁移单',
        wrapClassName: 'vertical-center-modal',
        newKey: transfer.newKey,
        onCancel() {
            dispatch({
                type: 'transfer/hideViewModal',
            })
        },
    }

    const addTransferDetailModal = {
        item: transfer.assetItem,
        visible: transfer.addTransferDetailModalVisible,
        // form: form,
        deptList: transfer.deptList,
        userList: transfer.userList,
        roomList: transfer.roomList,
        rackList: transfer.rackList,
        deptUserList:transfer.deptUserList,
        dataCenterList:transfer.dataCenterList,
        addTransferDetailHandler: addTransferDetailHandler,
        maskClosable: false,
        confirmLoading: loading,
        title: '添加迁移详情',
        wrapClassName: 'vertical-center-modal',
        newKey: transfer.newKey,
        dispatch: dispatch,
        onCancel() {
            dispatch({
                type: 'transfer/hideAddTransferDetailModal',
            })
        },
    }


    const editTransferModal = {
        item: transfer.editViewItem,
        visible: transfer.editModalVisible,
        type: transfer.editModalType,
        maskClosable: false,
        assetList: assetList,
        id: transfer.transferId,
        onAddDetail: onAddDetail,
        onEditTransfer: onEditTransfer,
        userList: transfer.userList,
        assetType: transfer.assetTypeTree,
        editDetailList: transfer.editDetailList,
        roomList: transfer.roomList,
        assetBrandList: transfer.assetBrandList,
        confirmLoading: loading,
        title: `编辑迁移单`,
        wrapClassName: 'vertical-center-modal',
        newKey: transfer.newKey,
        onOk(data) {
            dispatch({
                type: `transfer/doTransfer`,
                payload: data,
            })
        },
        onCancel() {
            dispatch({
                type: 'transfer/hideEditViewModal',
            })
        },
        onCreateDetail(data) {
            dispatch({
                type: 'transfer/showCreateDetailModal',
                payload: data,
            })
        },


    }

    const doTransferModal = {
        item: transfer.doTransferViewItem,
        visible: transfer.doTransferModalVisible,
        type: transfer.doTransferModalType,
        maskClosable: false,
        transferDetailList: transfer.transferDetailList,
        confirmLoading: loading,
        title: `迁移`,
        wrapClassName: 'vertical-center-modal',
        dispatch: dispatch,
        newKey: transfer.newKey,
    }

    const editTransferDetailModal = {
        detailItem: transfer.editTransferDetailItem,
        visible: transfer.editDetailModalVisible,
        // form: form,
        deptList: transfer.deptList,
        userList: transfer.userList,
        roomList: transfer.roomList,
        rackList: transfer.rackList,

        maskClosable: false,
        confirmLoading: loading,
        title: '编辑迁移详情',
        wrapClassName: 'vertical-center-modal',
        newKey: transfer.newKey,
        onCancel() {
            dispatch({
                type: 'transfer/hideEditDetailViewModal',
            })
        },

        editDetailHandler(data) {
            for (var i = 0; i < editDetailList.length; i++) {
                if (data.detailId == editDetailList[i].id_) {
                    editDetailList[i].targetManageBranchId_ = data.targetManageBranch;
                    // editDetailList[i].targetManageBranchName = data.targetManageBranch.label;
                    editDetailList[i].targetUseBranchId_ = data.targetUseBranch;
                    // editDetailList[i].targetUseBranchName = data.targetUseBranch.label;
                    editDetailList[i].targetEndUser = data.targetEndUser;
                    editDetailList[i].targetRoomId_ = data.targetRoom;
                    // editDetailList[i].targetRoomName = data.targetRoom.label;
                    editDetailList[i].targetRackId_ = data.targetRack;
                    // editDetailList[i].targetRackName = data.targetRack.label;
                    editDetailList[i].targetStart = data.targetStart;
                    editDetailList[i].targetEnd = data.targetEnd;
                    editDetailList[i].status = data.status;
                    editDetailList[i].id = editDetailList[i].id_;
                }
            }
            dispatch({
                type: 'transfer/hideEditDetailViewModal',
                payload: editDetailList,
            })
        },
    }



    const loopRoom = data => data.map((item) => {
        return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    return (
        <div style={{backgroundColor: '#fff' }}>
            <div style={{ minHeight: '100%' }}>
                <div style={{ width: '100%', backgroundColor: '#fff', lineHeight: '40px', paddingLeft: '20px', paddingTop: '10px' }}>
                    <Form layout="inline" >
                        <FormItem>
                            {getFieldDecorator('userName')(
                                <Input type="text" placeholder="操作人" style={{ width: '200px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('executeTime')(
                                <RangePicker style={{ width: '300px' }} format="YYYY-MM-DD" />
                            )}
                        </FormItem>
                        <FormItem>
                        {getFieldDecorator('status')(
                            <Select
                                showSearch
                                style={{ width: 200 }}
                                placeholder="选择状态"
                                optionFilterProp="children"  
                        >
                              <Option value="">全部</Option>
                              <Option value="1">未完成</Option>
                              {/* <Option value="2">处理中</Option>  */}
                              <Option value="3">已完成</Option>                                 
                            </Select>     
                        )}                       
                    </FormItem>       

                        <FormItem>
                            <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                        </FormItem>
                        <FormItem>
                            <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                        </FormItem>

                        <div style={{ marginTop: '-40px', textAlign: 'right', paddingRight: '10px' }}>
                            <FormItem>
                                <Button type="primary" size='large' onClick={addHandler}>新增迁移单</Button>
                            </FormItem>
                        </div>
                    </Form>
                </div>

                <div style={{ width: '100%', padding:"30px 20px", }}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={transfer.list} pagination={pagination}
                    />
                </div>
                <AddTransferModal {...modalProps} />
                <SecondTransferModal {...secondModalProps} />
                <TransferDetailModal {...viewModalProps} />
                <AddTransferDetailModal {...addTransferDetailModal} />
                {/* <EditTransferModal {...editTransferModal} /> */}
                {/* <EditTransferDetailModal {...editTransferDetailModal} /> */}
                <DoTransferModal {...doTransferModal} />
            </div>
        </div>
    );
}

function mapStateToProps(state) {
    return { transfer: state.transfer, loading: state.loading.models.transfer };
}

Transfer = Form.create()(Transfer);

export default connect(mapStateToProps)(Transfer);
